<template>
  <div class="card skeleton">
    <div class="thumb"></div>
    <div class="line w60"></div>
    <div class="line w40"></div>
    <div class="chips">
      <span class="chip"></span><span class="chip"></span><span class="chip"></span>
    </div>
  </div>
</template>
<script setup></script>
<style scoped>
.card { background:#181c24; border:1px solid #2a3040; border-radius:12px; padding:10px; }
.skeleton .thumb { height:200px; border-radius:8px; background:linear-gradient(90deg,#1a2332 25%,#212c3f 50%,#1a2332 75%); animation: shimmer 1.4s infinite; }
.skeleton .line { height:12px; margin-top:10px; border-radius:6px; background:linear-gradient(90deg,#1a2332 25%,#212c3f 50%,#1a2332 75%); animation: shimmer 1.4s infinite; }
.w60 { width:60%; } .w40 { width:40%; }
.chips { display:flex; gap:8px; margin-top:8px; }
.chip { width:40px; height:16px; border-radius:999px; background:linear-gradient(90deg,#1a2332 25%,#212c3f 50%,#1a2332 75%); animation: shimmer 1.4s infinite; }
@keyframes shimmer { 0%{background-position:-200px 0}100%{background-position:200px 0} }
</style>  